const path = require('path')

//这个插件需要解构
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//这个插件不需要解构
const htmlWebpackPlugin = require('html-webpack-plugin')

// const { apply } = require('file-loader')

const webpack = require('webpack')

//创建插件
class MyPlugin {
    // 这个方法会在Webpack启动时被自动调用
    //传入一个对象参数,这个参数对象是webpack工作工过程中最核心的对象,该对象包含此处构建对象的信息
    apply(compiler) {
        //钩子
        compiler.hooks.emit.tap('MyPlugin', compilation => {
            //compilation => 可以理解为此次打包的上下文
            for (const name in compilation.assets) {
                if (name.endsWith('.js')) {
                    const contents = compilation.assets[name].source()
                    const withoutComments = contents.replace(/\/\*\*+\//g, '')
                    compilation.assets[name] = {
                        source: () => withoutComments,
                        size: () => withoutComments.length
                    }
                }
            }
        })
    }
}

module.exports = {
    //工作模式(无：none,生产环境：production,工作环境development)
    mode: 'none',
    //入口
    entry: './src/main.js',
    //输入
    output: {
        //文件名称
        filename: 'bundle.js',
        //文件路径,并且必须是一个绝对路径
        path: path.join(__dirname, 'dist'),
        //资源文件路径-告诉网站打包过后的路径
        // publicPath:'dist/'
    },
    devtool: 'source-map',
    optimization: {
        usedExports: true,
        concatenateModules: true,
        minimize: true
    },
    devServer: {
        //额外的静态资源,可以是一个数组
        contentBase: './piblic',
        hot: true,
        //代理
        proxy: {
            //访问到/api是代理到其他路径
            '/api': {
                //https://localhost:8080/api/users -> https://api.github.com/spi/users
                target: 'https://api.github.com',
                //重写
                pathRewrite: {
                    //https://localhost:8080/api/users -> https://github.com/api/users
                    '^/api': ''
                },
                //不能使用localhos：8080作为请求 Github 的主机名
                changeOrigin: true
            }
        }
    },
    module: {
        //规则
        rules: [
            // {
            //     test: /.js$/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             //全部es最新特性
            //             persets:['@babel/preset-env']
            //         }
            //     }
            // },
            {
                //匹配路径
                test: /.css$/,
                //指定使用的loader
                // use:'css-loader'
                use: [
                    //这里的loader是重后往前执行的
                    'style-loader',
                    'css-loader'
                ]
            },
            // {
            //     test: /.jpg$/,
            //     //使用文件资源加载器
            //     use:'file-loader'
            // }
            {
                test: /.jpg$/,
                //这里表示超过10kb的就不使用url-loader,就会自动使用file-loader打,如果使用这种方式,必须需要先安装file-loader
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024 //10kb
                    }

                }
            },
            // {
            //     test: /.html$/,
            //     use: {
            //         loader: 'html-loader',
            //         options: {
            //             //因为这个插件默认打包解析img的src属性,让这个加载器支持a标签的href属性
            //             attrs:['img:src','a:href']
            //         }
            //     }
            // }
        ]
    },
    plugins: [
        //每次打包之前清除dist目录下的文件
        new CleanWebpackPlugin(),
        //创建index.html
        new htmlWebpackPlugin({
            title: 'Webpack Plugin Sample',
            meta: {
                viewport: 'width=decice-width'
            },
            template: './src/index.html'
        }),
        //创建about.html
        new htmlWebpackPlugin({
            filename: 'about.html'
        }),
        new MyPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}